<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>

    <title>建议反馈</title>

    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <style>
        input {
            outline: none;
            border: none;
            height: 20px;
            line-height: 20px;
        }

        input::-webkit-input-placeholder {
            font-size: 14px;
            font-size: 14px
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        #app {
            /* 将 flex-grow 设置为1，该元素会占用全部可使用空间
               而其他元素该属性值为0，因此不会得到多余的空间*/
            /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .footer {
            /* 和 header 一样，footer 也采用固定高度*/
            /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
            flex: 0 0 auto;
        }


    </style>
</head>
<body>
<div id="app">
    <div class="weui-cells__title">您的建议</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd" >
                <form id="mainForm" name="mainForm" method="post" action="/advice/page/result">
                    <textarea class="weui-textarea" placeholder="请填写您对我们的宝贵建议" rows="18" name="content"
                              v-model="content"></textarea>
                    <div class="weui-textarea-counter"><span>{{inputLength}}</span>/500</div>

                </form>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="button_area">
            <a class="weui-btn weui-btn_primary" v-on:click="submit">提 交</a>
        </div>
    </div>

</div>

<div class="js_dialog" id="iosDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd" id="dialogContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="/applyList" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            content: ''
        },
        computed: {
            inputLength: function () {
                return this.content.length;
            }
        },
        methods: {
            submit: function () {
                if (this.validateInput()) {
                    $("#mainForm").submit();
                }
            },
            validateInput: function () {
                return true;
            }
        }
    });

</script>


</body>
</html>